<template>
  <div>
    <jc-bar prve-btn @prve="$router.push({ path: '/flower' })">
      <v-spacer />
      {{ title }}
      <v-spacer />
    </jc-bar>
    <v-main>
      <v-container class="flower-container">
        <!--      zanmei-->
        <v-card :color="cardBgColor" class="mb-2" elevation="0">
          <v-card-subtitle>今日赞美</v-card-subtitle>
          <v-card-title class="text--white">{{ zmContent["mulu"] }}</v-card-title>
          <v-card-actions>
            <v-spacer />
            <v-btn icon @click="play(zmContent['dmtUrl']['adUrl'], 'zmPlayBtn')">
              <v-icon :size="32" :color="audioIconColor">
                {{ zmPlayBtn }}
              </v-icon>
            </v-btn>
          </v-card-actions>
          <v-card-text style="text-indent: 25px">
            <p style="line-height: 20px; font-size: 14px">
              {{ zmContent["lyric"] }}
            </p>
          </v-card-text>
        </v-card>
        <v-divider />
        <!--      huayu-->
        <v-card :color="cardBgColor" class="mb-2" elevation="0">
          <v-card-subtitle>每日话语</v-card-subtitle>
          <v-card-actions>
            <v-spacer />
            <v-btn icon>
              <v-icon :size="32" color="grey darken-2" @click="fangda(wrapper[0]['imgUrl'])">
                {{ fandDaJingIcon }}
              </v-icon>
            </v-btn>
            <v-btn icon @click="play(wrapper[0]['audioUrl'], 'hyPlayBtn')">
              <v-icon :size="32" :color="audioIconColor">
                {{ hyPlayBtn }}
              </v-icon>
            </v-btn>
          </v-card-actions>
          <v-card-text>
            <v-img :src="wrapper[0]['imgUrl']"></v-img>
          </v-card-text>
        </v-card>
        <v-divider />
        <v-card :color="cardBgColor" class="mb-2" elevation="0">
          <v-card-subtitle>Todays Words</v-card-subtitle>
          <v-card-actions>
            <v-spacer />
            <v-btn icon>
              <v-icon :size="32" color="grey darken-2" @click="fangda(wrapper[1]['imgUrl'])">
                {{ fandDaJingIcon }}
              </v-icon>
            </v-btn>
            <v-btn icon @click="play(wrapper[1]['audioUrl'], 'hyEnPlayBtn')">
              <v-icon :size="32" :color="audioIconColor">
                {{ hyEnPlayBtn }}
              </v-icon>
            </v-btn>
          </v-card-actions>
          <v-card-text>
            <v-img :src="wrapper[1]['imgUrl']"></v-img>
          </v-card-text>
        </v-card>
        <v-divider />
        <!--      jingwen-->
        <div class="xinfeng-container mt-9">
          <v-sheet v-if="xinfengOpen" class="xinfeng-dakai" elevation="10"></v-sheet>
          <transition name="fade">
            <v-card :class="{ 'xinfeng-card': true }" v-if="xinfengOpen" :color="cardBgColor" :elevation="10">
              <v-card-subtitle>每日经文</v-card-subtitle>
              <v-card-text>
                <p>
                  {{ jwContent["chContext"] }}
                </p>
                <p style="text-align: right">
                  {{ jwContent["chTitle"] }}
                </p>
                <p>
                  {{ jwContent["enContext"] }}
                </p>
                <p style="text-align: right">
                  {{ jwContent["enTitle"] }}
                </p>
              </v-card-text>
            </v-card>
          </transition>
          <v-sheet
            :class="{
              'xinfeng-wrap': true,
              'open-xinfeng-shandow': xinfengOpen,
            }"
            :elevation="10"
          >
            <div class="xinfeng-btn" v-ripple @click="xinfengOpen = !xinfengOpen"></div>
            <div class="xinfeng-text">A letter from the kingdom of God</div>
          </v-sheet>
          <div class="text-center mt-2">点击圆形按钮打开信封</div>
        </div>
      </v-container>
    </v-main>
    <v-dialog v-model="dialogVisable" content-class="jc-dialog">
      <img :src="cimgUrl" alt="" />
    </v-dialog>
  </div>
</template>
<script>
import JcBar from "../../../layout/JcBar";
import { getItem, getJwItem, getSrZmItemId } from "../../../api/cloudbase-hd.js";
// import { fenxiang } from '../../../jcui/wx-api';
export default {
  name: "index",
  components: { JcBar },
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      jwId: "",
      zmId: "",
      wrapper: [
        {
          audioUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/nad/5b839702e6de9a10b5990dbb9b8115cd.mp3",
          imgUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/nad/501d57b81b4609902277384cca05acff.jpg",
          sort: 1,
          title: "",
        },
        {
          audioUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/nad/1ae633345d13af9e28aee34fa4d6aaf6.mp3",
          imgUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/nad/f2ee44ae1a3a723d65cc570fb768ebd4.jpg",
          sort: 2,
          title: "",
        },
      ],
      title: "",
      indexImage: "",
      jwContent: {
        chContext: "",
        chTitle: "",
        enContext: "",
        enTitle: "",
        _id: "",
      },
      zmContent: {
        _id: "5b00f970605d87b30340f4b808b2d816",
        dmtUrl: {
          adUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/ad/ecbc5f753bd6dff55cc8b3408dbf2234.mp3",
          gepuUrl:
            "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/ad/ecbc5f753bd6dff55cc8b3408dbf2234.jpg",
          pptUrl: "https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/sgb/srzm_gz_img/89应许的旅程.png",
        },
        isad: true,
        isopern: false,
        isupper: true,
        lyric:
          "那一天神赐给我的应许，\n通过你要救活全世界。\n要去拯救数不清的灵魂们，\n所以握住应许别被骗。\n当奴隶吗？进监狱吗？当宰相都是过程而已，\n神同在哦，以马内利，成就着应许。\n耶稣基督十字架，解决了一切，\n一切问题事件于我是应许的旅程。",
        mulu: "应许的旅程",
        shijiIndex: 3,
        xuhao: 89,
        years: "2018 少儿赞美",
      },
      xinfengOpen: false,
      dialogVisable: false,
      cimgUrl: "",
      _audio: null,
      zmPlayBtn: "mdi-play-circle",
      hyPlayBtn: "mdi-play-circle",
      hyEnPlayBtn: "mdi-play-circle",
      fandDaJingIcon: "mdi-magnify-plus-outline", //放大镜的icon
      audioIconColor: "#6A76AB",
      cardBgColor: "#F5F5F5",
    };
  },
  mounted() {
    this._audio = document.createElement("audio");
  },
  async activated() {
    await this.init();
  },
  methods: {
    async init() {
      const res = await getItem(Number(this.id));
      this.jwId = res.jw_Id;
      this.zmId = res.zm_Id;
      this.title = res.title;
      this.wrapper = res.wrapper;
      this.indexImage = res.indexImage;
      document.title = "少儿日志" + res._id + "期";
      await this.getJw();
      await this.getZm();
      // await fenxiang(this.title, location.origin + '/#' + this.$route.fullPath, this.$route.meta.icon,document.title)
      return true;
    },
    async getJw() {
      const res = await getJwItem(this.jwId);
      const data = res.data[0];
      console.log(data);
      this.jwContent = data;
      return true;
    },
    async getZm() {
      const res = await getSrZmItemId(this.zmId);
      this.zmContent = res.data[0];
    },
    fangda(url) {
      this.dialogVisable = true;
      this.cimgUrl = url;
    },
    play(src, type) {
      const playIcon = "mdi-play-circle";
      const pauseIcon = "mdi-pause-circle";
      this.zmPlayBtn = playIcon;
      this.hyPlayBtn = playIcon;
      this.hyEnPlayBtn = playIcon;
      if (this._audio.src !== src) {
        this._audio.src = src;
        this[type] = pauseIcon;
        this._audio.play();
      } else {
        if (!this._audio.paused) {
          this._audio.pause();
          this[type] = playIcon;
        } else {
          this._audio.play();
          this[type] = pauseIcon;
        }
      }
    },
  },
  watch: {
    id: function (val) {
      this.id = val;
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url("//at.alicdn.com/t/webfont_e4eik5pmuef.eot"); /* IE9*/
  src:
    url("//at.alicdn.com/t/webfont_e4eik5pmuef.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("//at.alicdn.com/t/webfont_e4eik5pmuef.woff2") format("woff2"),
    url("//at.alicdn.com/t/webfont_e4eik5pmuef.woff") format("woff"),
    /* chrome、firefox */ url("//at.alicdn.com/t/webfont_e4eik5pmuef.ttf") format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("//at.alicdn.com/t/webfont_e4eik5pmuef.svg#思源黑体-极细") format("svg"); /* iOS 4.1- */
}

.flower-container {
  max-width: 400px;
}
.xinfeng-dakai {
  width: 100%;
  height: 100px;
  background-color: #fff9c4;
  margin-top: 20px;
  position: relative;
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
}
.xinfeng-container {
  position: relative;
  .xinfeng-card {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    position: absolute;
    top: -280px;
  }
  .xinfeng-wrap {
    width: 100%;
    height: 200px;
    background-color: #fff9c4;
    margin: 0px 0px;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    .xinfeng-btn {
      position: absolute;
      width: 25px;
      height: 25px;
      border-radius: 25px;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #f57f17;
    }
    .xinfeng-text {
      font-family: "webfont" !important;
      position: absolute;
      top: 50%;
      height: 30px;
      line-height: 30px;
      color: black;
      text-align: center;
      width: 100%;
      font-size: 12px;
    }
    &:after {
      content: "";
      display: block;
      position: absolute;
      top: 80px;
      right: 50%;
      transform: rotate(20deg);
      width: 60%;
      height: 2px;
      background-color: #e0e0e0;
      transform-origin: right bottom;
    }
    &:before {
      content: "";
      display: block;
      position: absolute;
      right: 50%;
      top: 78px;
      width: 60%;
      height: 2px;
      background-color: #e0e0e0;
      transform-origin: right bottom;
      transform: rotate(-200deg);
    }
  }
}

.open-xinfeng-shandow {
  box-shadow:
    0px -5px 10px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.3) !important;
}
.fade-enter-active,
.fade-leave-active {
  transition-duration: 1s;
  transform: translateY(-100%);
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(0%);
}

::v-deep .jc-dialog {
  box-shadow: none !important;
}
</style>
